<template>
    <div class="container">
        <div>
            <head-bar :rightClick="jumpCustomerByAdd" height="80" middleText="我的客户" leftText=""  :rightIcons="['search','add']"></head-bar>
            <!--<div class="head-top"></div>-->
            <!--<div class="head-panel">-->
            <!--<div class="head-left"></div>-->
            <!--<div class="head-middle">-->
            <!--<text class="head-middle-t">我的客户</text>-->
            <!--</div>-->
            <!--<div class="head-right">-->
            <!--<image class="customer-head-add"-->
            <!--src="root:img/search.png"></image>-->
            <!--<image @click="jumpFollowByAdd" class="customer-head-search" src="root:img/add.png"></image>-->
            <!--</div>-->
            <!--</div>-->
        </div>
        <div class="tab-area">
            <div @click="changeCustomer(0)" :class="['tab-li', customerIndex == 0 ? 'active':'']">
                <text :class="['tab-t',customerIndex == 0 ? 'active-text':'']">采购商客户({{buyers.length}})</text>
            </div>
            <div @click="changeCustomer(1)" :class="['tab-li', customerIndex == 1 ? 'active':'']">
                <text :class="['tab-t',customerIndex == 1 ? 'active-text':'']">供应商客户({{suppers.length}})</text>
            </div>
        </div>
        <host style="flex: 1" :page="customerIndex">
            <div @load="load" class="tab-content">
                <list>
                    <cell v-for="v in buyers">
                        <div class="item">
                            <div class="item-head">
                                <div class="item-title">
                                    <text class="item-title-t">{{v.buyerName}}</text>
                                    <text class="team tag" v-if="v.isStrategic == 1000">合</text>
                                    <text class="past tag" v-if="v.lateCount > 0">逾</text>
                                </div>
                                <div class="item-stat">
                                    <text class="item-stat-t">{{getStatName(v.userStatus)}}</text>
                                </div>
                            </div>
                            <div class="item-content">
                                <div class="content-ul">
                                    <text class="content-t content-text">应付款：{{v.paymentAmount ? '￥'+v.paymentAmount:''}}</text>
                                    <text class="content-t content-text">应还款：{{'￥'+getRepayAmount(v)}}</text>
                                    <text class="content-t content-text">最近跟进：{{formatTime(v.createTime)}}
                                    </text>
                                </div>
                                <div @click="jumpCustomerDetail(v.userBuyerId,'buyer')" class="item-link">
                                    <image class="item-link-i" src="root:img/right_arrow.png"></image>
                                </div>
                            </div>
                            <div class="item-btns">
                                <div class="item-btn">
                                    <text @click="jumpFollowByAdd(v.buyerName,v.userBuyerId,'buyer')" class="btn-font">写跟进</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font">建任务</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font" @click="callPhone(v.linkman_mobile)">打电话</text>
                                </div>
                            </div>
                        </div>
                    </cell>
                    <cell style="height: 100px;width: 720px;"></cell>
                </list>
            </div>
            <div class="tab-content">
                <list>
                    <cell v-for="v in suppers">
                        <div class="item supper-item">
                            <div class="item-head">
                                <div class="item-title">
                                    <text class="item-title-t">{{v.org_name}}</text>
                                    <text class="team tag" v-if="v.is_strategic == 1000">合</text>
                                </div>
                                <div class="item-stat">
                                    <text class="item-stat-t">{{getStatName(v.status)}}</text>
                                </div>
                            </div>
                            <div class="item-supper-content">
                                <div class="content-ul">
                                    <text class="content-t content-text">联系人：{{getlinkman(v)}}</text>
                                    <text class="content-t content-text">最近跟进：{{formatTime(v.follow_time)}}
                                    </text>
                                </div>
                                <div class="item-link" @click="jumpCustomerDetail(v.userId,'supper ')">
                                    <image class="item-link-i" src="root:img/right_arrow.png"></image>
                                </div>
                            </div>
                            <div class="item-btns">
                                <div class="item-btn">
                                    <text @click="jumpFollowByAdd(v.org_name,v.user_supper_id,'supper')" class="btn-font">写跟进</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font">建任务</text>
                                </div>
                                <div class="item-btn">
                                    <text class="btn-font" @click="callPhone(v.linkman_mobile)">打电话</text>
                                </div>
                            </div>
                        </div>
                    </cell>
                    <cell style="height: 100px;width: 720px;"></cell>
                </list>
            </div>
        </host>
    </div>
</template>

<style>
    .container {
        flex-direction: column-reverse;

    }

    .tab-t {
        font-size: 30px;
    }

    /*切换栏区域*/
    .tab-area {
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 750px;
        background-color: white;
        flex-direction: row;
    }

    /*切换条*/
    .tab-li {
        flex: 1;
        align-items: center;
        justify-content: center;
        height: 80px;
        border-bottom-width: 2px;
        border-bottom-color: #f5f5f5;
    }

    /*活动栏*/
    .active {
        border-bottom-width: 2px;
        border-bottom-color: #00c470;
    }

    /*当前活动字体*/
    .active-text {
        color: #00c470;
    }

    /*标签栏目内容*/
    .tab-content {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #f0f0f0;
    }

    .refresh {
        align-items: center;
        justify-content: center;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item {
        height: 350px;
        width: 750px;
        margin-top: 5px;
        padding-right: 15px;
        padding-left: 15px;
        background-color: white;
    }

    .supper-item {
        height: 287px;
    }

    .item-head {
        width: 720px;
        height: 80px;
        padding-left: 10px;
        padding-right: 10px;
        flex-direction: row;
        padding-top: 25px;
        border-bottom-width: 1px;
        border-bottom-color: #dddddd;
    }

    .btn-font {
        font-size: 30px;
        color: #b4b4b4;
    }

    .content-text {
        font-size: 30px;
        color: #696969;
    }

    .item-title {
        width: 510px;
        flex-direction: row;
    }

    .item-stat {
        width: 200px;
    }

    .item-title-t {
        font-size: 30px;
    }

    .past {
        background-color: #FF0000;
    }

    .tag {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        color: white;
        margin-left: 10px;
        margin-top: 3px;
    }

    .team {
        background-color: #01A65A;
    }

    .item-stat-t {
        color: #ff6f62;
        font-size: 30px;
        text-align: right;
        margin-right: 20px;
    }

    .item-content {
        width: 720px;
        height: 190px;
        flex-direction: row;
    }

    .item-supper-content {
        width: 720px;
        height: 126px;
        flex-direction: row;
    }

    .content-ul {
        width: 650px;
        flex-direction: column;
    }

    .content-t {
        height: 63px;
        font-size: 30px;
        margin-left: 10px;
        padding-top: 15px;
    }

    .item-link {
        width: 70px;
        align-items: center;
        justify-content: center;
    }

    .item-link-i {
        width: 50px;
        height: 50px;
    }

    .item-btns {
        border-top-width: 1px;
        border-top-color: #dddddd;
        height: 80px;
        flex-direction: row;
    }

    .item-btn {
        width: 240px;
        align-items: center;
        justify-content: center;
    }

</style>

<script>
    import headBar from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import ynav from '../network/nav.js'

    const nav = weex.requireModule('navigator')

    export default {
        data: {
            customerIndex: 0,
            buyers: [],
            suppers: []
        },
        components: {headBar},
        computed: {},
        methods: {
            callPhone(phone){
              if(phone == null || phone == undefined || !phone) {
                  var modal=weex.requireModule('modal')
                  modal.toast({message:'暂无联系电话'})
              }else{
                  const device = weex.requireModule('device')
                  device.tel(phone)
              }
            },
            changeCustomer: function (index) {
                this.customerIndex = index;
            },
            formatTime: function (time) {
                if (!time) {
                    return ''
                }
                return dtl.formatDay(time)
            },
            getStatName: function (statCode) {
                switch (statCode) {
                    case 1000:
                        return '已注册'
                    case 1100:
                        return '已退出'
                    case 1200:
                        return '已认证'
                    case 1400:
                        return '未注册'
                    case 1500:
                        return '已删除'
                }
            },
            //应还款显示格式
            getRepayAmount: function (v) {
                if (!v.accountPeriod) {
                    return `${v.repayAmount}`
                } else {
                    return `${v.repayAmount}（账期：${v.accountPeriod}个月，还款日${v.repayDay}号）`
                }

            },
            //格式化联系人
            getlinkman: function (v) {
                if (v.linkman) {
                    if (v.linkman_mobile) {
                        return `${v.linkman}（${v.linkman_mobile}）`
                    } else {
                        return `${v.linkman}`
                    }
                } else {
                    return ''
                }
            },
            //跳转搜索页面或添加页面
            jumpSearchOrAdd: function (name) {
                if (name == 'add') {
                    nav.push('root:com/yx/customers/customerAdd.js')
                } else {
                    nav.push('root:com/yx/customers/searchCustomer.js')
                }
            },

            //跳转客户详情
            jumpCustomerDetail: function (userId, userType,orgName) {
                nav.pushParam('root:com/yx/customers/customerDetail.js',{userId:userId,userType:userType,orgName:orgName})
            }
        },
        created() {
            var self = this
            nw.postDefine('/app/userSupplier/list', {
                success(res) {
                    self.buyers = res.buyer
                    self.suppers = res.supper
                }
            })
        }
    };
</script>